import { useEffect, useRef, useState } from 'react'
import './index.scss'
import useECharts from '@/utils/useECharts'
import { getMovieTopRatedApi } from '@/api'

function MovieRanking() {
  const rankingRef = useRef(null)
  const [movieList, setMovieList] = useState([])

  useEffect(() => {
    const getMovieTopRate = async () => {
      const res = await getMovieTopRatedApi()
      const movieList = res.data.data.map((item, index) => ({
        value: index + 1,
        name: item.movie_name
      }))
      setMovieList(movieList)
    }
    getMovieTopRate()
  }, [])

  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '排名',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 10,
        minSize: '0%',
        maxSize: '100%',
        sort: 'ascending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        data: movieList
      }
    ]
  }

  useECharts(rankingRef, option)

  return (
    <>
      <div className="movie-ranking">
        <h1>电影榜单TOP10</h1>
        <div id="ranking" ref={rankingRef}></div>
      </div>
    </>
  )
}

export default MovieRanking
